/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  ActivityIndicator,
  TouchableOpacity
} from 'react-native';
import styled from 'styled-components';
import { Actions } from 'react-native-router-flux';
import PullLoad from './../eduTalk/components/PullAndLoad';
import { getToken } from '../../../utils/auth';
import { applyRepaireList } from '../../../api/index';

export default class repaire extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '故障报修',
      tabLists: [
        { label: '全部' },
        { label: '我的申报' },
        { label: '我的维修' },
        { label: '待认领' }
      ],
      curTabIndex: 0,
      curMenuIndex: 0,
      data: [],
      nomore: false,
      pageSize: 5,
      pageNumber: 1,
      bdId: '',
      token: '',
      isLoading: false
    };
  }
  getOrderList(pageSize, pageNumber, fresh, token) {
    let nomore;
    this.setState({ isLoading: true }, () => {
      applyRepaireList(
        token,
        '',
        pageNumber,
        pageSize,
        this.state.curTabIndex
      ).then(res => {
        this.setState({ isLoading: false });
        if (res.code === '0') {
          const item = res.data.rows;
          if (item.length < pageSize) {
            nomore = true;
          } else {
            nomore = false;
          }
          if (fresh) {
            this.setState({
              data: item,
              nomore: nomore
            });
          } else {
            this.setState({
              data: this.state.data.concat(item),
              nomore: nomore
            });
          }
        } else {
        }
      });
    });
  }
  componentDidMount() {
    this.onEndReachedCalled = false;
    getToken().then(token => {
      this.setState({ token });
      this.getOrderList(
        this.state.pageSize,
        this.state.pageNumber,
        true,
        token
      );
    });
  }
  _onEndReached = () => {
    if (!this.state.nomore && this.onEndReachedCalled) {
      this.getOrderList(
        this.state.pageSize,
        ++this.state.pageNumber,
        false,
        this.state.token
      );
    }
    this.onEndReachedCalled = true;
  };
  _onRefresh() {
    this.setState({ nomore: false, pageNumber: 1 }, () => {
      this.getOrderList(this.state.pageSize, 1, true, this.state.token);
    });
  }
  //返回itemView
  renderItem(item) {
    console.log(item, 101);
    return (
      <TouchableOpacity
        onPress={() => {
          Actions.repaireDetails({ bdId: item.bdId });
        }}>
        <View
          style={{
            width: '100%',
            height: 140,
            borderRadius: 10,
            marginBottom: 20,
            backgroundColor: '#fff',
            flexDirection: 'row'
          }}>
          <View
            style={{
              width: 100,
              height: '100%',
              backgroundColor: '#4CB4D7',
              borderBottomLeftRadius: 10,
              borderTopLeftRadius: 10
            }}>
            <ListText>申报人：</ListText>
            <ListText>申报部门：</ListText>
            <ListText>故障类型：</ListText>
            <ListText>故障分类：</ListText>
            <ListText>上报时间：</ListText>
            <ListText>维修人：</ListText>
            <ListText>状态：</ListText>
          </View>
          <View
            style={{
              width: '100%',
              height: '100%',
              // backgroundColor: '#fff',
              borderBottomRightRadius: 10,
              borderTopRightRadius: 10,
              paddingLeft: 20
            }}>
            <ListValText>{item.declareName}</ListValText>
            <ListValText>{item.bdDept}</ListValText>
            <ListValText>{item.bdGeneralities}</ListValText>
            <ListValText>{item.bdType}</ListValText>
            <ListValText>{item.bdDeclareDate}</ListValText>
            <ListValText>{item.bmiMaintainName}</ListValText>
            <ListValText>{item.bdState}</ListValText>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
  _keyExtractor = item => item.id;
  render() {
    return (
      <View
        style={{
          flex: 1
        }}>
        <View style={{ position: 'relative' }}>
          <Title style={{ backgroundColor: '#fff', position: 'relative' }}>
            故障报修
          </Title>
          <OnTouchableOpacity
            onPress={() => {
              Actions.addRepaire();
            }}
            style={{
              position: 'absolute',
              right: 10,
              top: 10
            }}>
            <Image
              style={{
                width: 15,
                height: 15
              }}
              source={require('../../../assets/work/repaire/add.png')}
            />
          </OnTouchableOpacity>
        </View>

        <View
          style={{
            flexDirection: 'row',
            backgroundColor: '#fff',
            marginTop: 10
          }}>
          {this.state.tabLists.map((v, _idx) => (
            <Text
              onPress={() => {
                this.setState(
                  {
                    curTabIndex: _idx,
                    curMenuIndex: 0,
                    pageNumber: 1,
                    pageSize: 5,
                    data: []
                  },
                  () => {
                    this.getOrderList(
                      this.state.pageSize,
                      this.state.pageNumber,
                      true,
                      this.state.token
                    );
                  }
                );
              }}
              style={{
                width: '25%',
                height: 40,
                lineHeight: 40,
                textAlign: 'center',
                color: this.state.curTabIndex === _idx ? '#826CF5' : '#333',
                borderRightColor: '#ccc',
                borderRightWidth:
                  _idx !== this.state.tabLists.length - 1 ? 0.5 : 0,
                borderBottomColor:
                  this.state.curTabIndex === _idx ? '#826CF5' : '#fff',
                borderBottomWidth: this.state.curTabIndex === _idx ? 3 : 0
              }}>
              {v.label}
            </Text>
          ))}
        </View>
        <View style={{ flex: 1, padding: 15 }}>
          {this.state.isLoading ? (
            <View>
              <ActivityIndicator
                animating={this.state.isLoading}
                color="#826CF5"
                size="large"
              />
            </View>
          ) : (
            <PullLoad
              data={this.state.data}
              keyExtractor={this._keyExtractor}
              onEndReached={this._onEndReached}
              nomore={this.state.nomore}
              renderItem={this.renderItem.bind(this)}
              onRefresh={this._onRefresh.bind(this)}
            />
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  normalText: {
    height: 80,
    lineHeight: 40,
    color: '#000',
    textAlign: 'center'
  },
  footer: {
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    backgroundColor: '#FAFAFA'
  }
});
const Title = styled.Text`
  width: 100%;
  height: 40;
  line-height: 40;
  text-align: center;
`;
const ListText = styled(Text)`
  width: 100%;
  text-align: center;
  color: #fff;
`;
const ListValText = styled(Text)`
  width: 100%;
  text-align: left;
  color: #000;
`;
const OnTouchableOpacity = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;
